<!-- 附件简历页面 -->
<template>
	<view class="page">
		<view class="content">
			<view class="title1 flex justify-between align-center">
				<view class="name ">
					附件简历
				</view>
				<view class="icon">
					<text class="num">{{list.length}}</text>
					<text>/3</text>
				</view>
			</view>
			<view class="sume">
				<view class="item flex justify-between align-center" v-for="item in list" :key="item.resumeFileId">
					<view class="left flex">
						<view class="img">
							<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/vip/%E6%96%87%E4%BB%B6.png" mode=""></image>
						</view>
						<view class="msg flex justify-between flex-column">
							<view class="name">
								{{item.fileName}}
							</view>
							<view class="childmsg">
								{{getTimer(item.createDate)}}上传
							</view>
						</view>
					</view>
					<view class="right flex justify-center align-center">
						<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/my/gengduo.png" mode="" @click="confirm(item)"></image>
					</view>
				</view>
			</view>
			<view class="uploads flex justify-center align-center" @click="uploads">
				<view class="centea flex justify-center align-center">
					<view class="icon flex justify-center align-center">
						<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/my/upload.png" mode=""></image>
					</view>
					<view class="name">
						上传简历
					</view>
				</view>
			</view>
			<view class="notice">
				支持doc、pdf、docx、wps格式 pfd格式更好找哦 不超过10M
			</view>
			<view class="notice">
				点击上传简历后请从微信聊天记录中选择文件
			</view>
			<view class="titleup">
				简历提升
			</view>
		</view>
		<view class="logoup" @click="pay">
			<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/my/zhuanjialogo.png" mode=""></image>
		</view>
		<!-- 底部弹出删除框 -->
		<view class="cover_screen" @click="showModalStatus = false" v-if="showModalStatus"></view>
		<view class="buy_box" v-if="showModalStatus">
					<text class="newdetaildivider"></text>
					<text class="delet" @click="del">删除</text>
					<text class="newdetaildivider"></text>
					<text class="title" @click="showModalStatus = false">取消</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				form:{
					path:''
				},
				showModalStatus:false,
				delQurey:{
					id:''
				}
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			//上传简历
			async uploads(){
				if(this.list.length < 3){
					let that = this
					await uni.chooseMessageFile({
					count: 1,
					extension:['.doc','.docx','.wps','.pfd'],
					success (res) {
				    // tempFilePath可以作为img标签的src属性显示图片
						let tempFilePaths = res.tempFiles[0]
						console.log(tempFilePaths)
						const uploadTask = uni.uploadFile({
							url: 'https://shanfu.51fnt.com/userResumeFile/uploadFile',
							filePath:tempFilePaths.path,
							name: 'path',
							formData: {fileName: tempFilePaths.name},
							header:{
								Authorization: uni.getStorageSync('openId')
							},
							success: (uploadFileRes) => {
								console.log(uploadFileRes);
								that.getData()
							}
						})
						// that.$post('/userResumeFile/uploadFile',that.form).then(()=>{
						// 	that.getData()
						// })
				  }
				})
				}else{
					uni.showToast({
						title:'简历数已达上限',
						icon: 'none'
					})
				}
				
			},
			//调起支付
			pay(){
				uni.navigateTo({
					url:'../../pagesB/pay/pay'
				})
				// uni.requestPayment({
				//     provider: 'wxpay',
				//     timeStamp: String(Date.now()),
				//     nonceStr: 'A1B2C3D4E5',
				//     package: 'prepay_id=wx20180101abcdefg',
				//     signType: 'MD5',
				//     paySign: '',
				//     success: function (res) {
				//         console.log('success:' + JSON.stringify(res));
				//     },
				//     fail: function (err) {
				//         console.log('fail:' + JSON.stringify(err));
				//     }
				// });
			},
			//删除简历
			async del(){
				await this.$remove('/userResumeFile/remove',this.delQurey)
				this.showModalStatus = false
				await this.getData()
				
			},
			confirm(e) {
				this.showModalStatus = true
				this.delQurey.id = e.resumeFileId
			},
			getTimer(timer) {
			  
			  let nowe = new Date();  // 当前的系统时间
			  let oldtime = new Date(timer);   //目标时间
			  let t_day = oldtime.getDate();
			  let t_year = oldtime.getFullYear();
			  let t_month = oldtime.getMonth() + 1;
			  let t_hour = oldtime.getHours();
			  let t_minute = oldtime.getMinutes();
			  if (t_hour<10){
			    t_hour = '0' + t_hour
			  }
			  if (t_minute < 10) {
			    t_minute = '0' + t_minute
			  }
			  let n_year = nowe.getFullYear();
			  let n_month = nowe.getMonth() + 1;
			  let n_day = nowe.getDate();
			  let mistiming = nowe - oldtime; // 计算出当前时间，与目标时间的时间差
			  if (t_year == n_year) {
			    if (n_month == t_month) {
			      //  在同一月  
			      if (n_day - t_day == 1) {
			        // 差等于1 昨天 + 时分
					console.log('昨天' + ' ' + t_hour + ':' + t_minute)
			        return '昨天' + ' ' + t_hour + ':' + t_minute
			      } else if (n_day - t_day == 0) {
			        // 显示 时分
					console.log( t_hour + ':' + t_minute)
			        return t_hour + ':' + t_minute
			      } else {
					console.log(t_month + '.' + t_day + ' ' +t_hour + ':' + t_minute)
			        return t_month + '.' + t_day + ' ' +t_hour + ':' + t_minute
			      }
			    }else {
					console.log(t_month + '.' + t_day)
					return t_month + '.' + t_day + ' ' +t_hour + ':' + t_minute
				}
			  } else {
			    //跨年了  显示 年 月 日 
				console.log(t_year + '.' + t_month + '.' + t_day + ' ' +t_hour + ':' + t_minute)
			    return t_year + '.' + t_month + '.' + t_day + ' ' +t_hour + ':' + t_minute
			  }
			},
			async getData() {
				let {data: list,code} = await this.$get('/userResumeFile/list')
				if(code == 200){
					this.list = list
					console.log(this.list)
					if(list.length == 0){
						uni.setStorageSync('jianli',false)
					}else{
						uni.setStorageSync('jianli',true)
					}
				}
				
			}
		}
	}
</script>

<style lang="scss">
.page{
	.content{
		padding: 40rpx 30rpx 0;
		.title1{
			.name{
				font-weight: bold;
				color: #333333;
				font-size: 32rpx;
			}
			.icon{
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
				.num{
					color: #0265EB;
				}
			}
		}
		.sume{
			padding: 50rpx 0 20rpx;
			.item{
				padding-bottom: 40rpx;
				margin-bottom: 40rpx;
				border-bottom: 1rpx solid rgba(0,0,0,.12);
				.left{
					.img{
						width: 68rpx;
						height: 68rpx;
						margin-right: 20rpx;
					}
					.msg{
						line-height: 1;
						.name{
							font-weight: bold;
							color: #333333;
							width: 500rpx;
							overflow: hidden;
							font-size: 28rpx;
						}
						.childmsg{
							font-weight: 400;
							color: #999999;
							font-size: 24rpx;
						}
					}
				}
				.right{
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
		.uploads{
			width: 690rpx;
			height: 80rpx;
			border: 6rpx dashed #0265EB;
			border-radius: 8rpx;
			.centea{
				.icon{
					width: 28rpx;
					height: 28rpx;
					margin-right: 20rpx;
				}
				.name{
					font-weight: bold;
					color: #0265EB;
					font-size: 28rpx;
					line-height: 1;
				}
			}
		}
		.notice{
			margin-top: 20rpx;
			font-weight: 400;
			color: #999999;
			font-size: 20rpx;
		}
		.titleup{
			font-weight: bold;
			color: #333333;
			font-size: 32rpx;
			margin: 50rpx 0 36rpx;
		}
	}
	.logoup{
		width: 715rpx;
		height: 188rpx;
		margin-left: 20rpx;
	}
	.buy_box {
		  width: 100%;
		  box-sizing: border-box;
		  position: fixed;
		  bottom: 0;
		  left: 0;
		  z-index: 2000;
		  background: #fff;
		  overflow: hidden;
		  display: flex;
		  flex-direction: column;
		  padding-bottom: env(safe-area-inset-bottom);
		}
		
		.newdetaildivider {
		  height: 1px;
		  background: #eaeaea;
		  display: block;
		}
		
		.title {
		  display: flex;
		  height: 99rpx;
		  font-size: 36rpx;
		  text-align: center;
		  align-items: center;
		  justify-content: center;
		}
		.delet{
			 display: flex;
			 height: 99rpx;
			 font-size: 36rpx;
			 text-align: center;
			 align-items: center;
			 justify-content: center;
			 color: red($color: #ff0000);
		}
		.titleImg {
		  flex-direction: column;
		  display: flex;
		  background-color: #eeeeee;
		}
		
		.titleImg text{
		  margin-top: 12rpx;
		  display: flex;
		  font-size: 36rpx;
		  text-align: center;
		  align-items: center;
		  justify-content: center;
		}
		
		.imgs {
		  margin-top: 12rpx;
		  display: flex;
		  justify-content: space-between;
		  margin-left: 30rpx;
		  margin-right: 30rpx;
		  margin-bottom: 12rpx;
		}
		
		.cover_screen {
		  width: 100%;
		  height: 100%;
		  position: fixed;
		  top: 0;
		  left: 0;
		  background: #000;
		  opacity: 0.2;
		  overflow: hidden;
		  z-index: 1000;
		  color: #fff;
		}
}
</style>
